<template></template>

<script setup lang="ts">
import * as L from 'leaflet'
import type { IPixelLayerStyleOptions } from '@quickearth/core'
const centerApi = import.meta.env.VITE_BASE_URL
import {
  GridDataGLFillMode,
  MemoryWindDataProvider,
  QEGridDataProvider,
  getBinary,
  resourceService,
  getText,
  MicapsDiamond4GridDataProvider,
  IGridLabelStyleOptions
} from '@quickearth/core'
import { LGridLabelLayer, LPixelLayer } from '@quickearth/leaflet'
import apiList from '@/pages/integrated-monitoring/api/api'
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
const monitoringStore = useMonitoringStore()
const gdskjcCurrentSelect = computed(() => monitoringStore.gdskjcCurrentSelect)
const sbGdCurrentSelect = computed(() => monitoringStore.sbGdCurrentSelect)

const baseMap = inject('baseMap')
// 图例数据
const legendData = ref([])
provide('legendData', legendData)
let layer
let windLayer
const layers = L.layerGroup().addTo(toRaw(baseMap.value))
async function updateGridLayer(type, styleType) {
  const res = await apiList.getChoroplethicMapPath({
    elementCode: gdskjcCurrentSelect.value
  })
  if (!res.data) return
  await resourceService.loadResourceFromConfigPath(
    'demos/styles/demo.config.json'
  )
  if (styleType === 'wind') {
    let newList = res.data.url.split(',')
    const uBuffer = await getText(centerApi + newList[0]) // uwind
    const vBuffer = await getText(centerApi + newList[1]) // uwind
    const uProvider = new MicapsDiamond4GridDataProvider(uBuffer)
    const vProvider = new MicapsDiamond4GridDataProvider(vBuffer)
    const provider = new MemoryWindDataProvider(uProvider, vProvider, {
      lazyCalc: false,
      isUV: true
    })
    windLayer = new LGridLabelLayer({
      name: '风向风速',
      debugShowPerformance: true,
      accurateYDelta: true //对于范围较大的数据，设置后会根据当前点所在的实际纬度计算y值在径向上的间隔变化，会稍微增加渲染时间。
    })
      .setDrawOptions({
        image: {
          data: 'image-wind#res',
          angle: '#degree2arc|1',
          color: 'color-wind#res',
          visible: function (data) {
            //用于判断裁切山西省范围的风杆图
            if (data > 10000) {
              return false
            } else {
              return true
            }
          }
        }
      })
      .setDataSource(provider)
    layers.addLayer(windLayer)
    const Buffer = await getText(centerApi + newList[2])
    const providerNew = new MicapsDiamond4GridDataProvider(Buffer)
    layer = new LPixelLayer()
    const style: IPixelLayerStyleOptions = {
      fillColor: `color-wind-new#res`,
      globalOpacity: 0.9,
      fillMode: GridDataGLFillMode.pixel1
    }
    layer.setDataSource(providerNew).setDrawOptions(style)
    layers.addLayer(layer)
    monitoringStore.mapLoading = false
  } else {
    const text = await getText(centerApi + res.data.url)
    if (!text) return
    const provider = new MicapsDiamond4GridDataProvider(text)
    const layer = new LPixelLayer()
    const style: IPixelLayerStyleOptions = {
      fillColor: `color-${styleType}#res`,
      globalOpacity: 0.9,
      fillMode: GridDataGLFillMode.pixel1
    }
    layer.setDataSource(provider).setDrawOptions(style)
    layers.addLayer(layer)
    monitoringStore.mapLoading = false
  }
}
const handleShowLayer = type => {
  layers.clearLayers()
  const currentSelect = monitoringStore.gdskjcOptions.find(
    i => i.value === gdskjcCurrentSelect.value
  )
  if (currentSelect) {
    legendData.value = currentSelect
    updateGridLayer(type, currentSelect.legendStyle)
  }
}
useEventBus('handleShowGridPointMonitoringLayer').on(handleShowLayer)
watch(
  () => gdskjcCurrentSelect.value,
  val => {
    if (val !== 'none') {
      handleShowLayer(val)
    } else {
      layers.clearLayers()
    }
  },
  {
    deep: true
  }
)
watch(
  () => sbGdCurrentSelect.value,
  val => {
    if (gdskjcCurrentSelect.value !== 'none') {
      handleShowLayer(gdskjcCurrentSelect.value)
    } else {
      layers.clearLayers()
    }
  },
  {
    deep: true
  }
)
onMounted(() => {
  if (gdskjcCurrentSelect.value !== 'none') {
    handleShowLayer(gdskjcCurrentSelect.value)
  }
})
onUnmounted(() => {
  layers.clearLayers()
})
</script>

<style scoped lang="scss"></style>
